<!DOCTYPE html>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright © 2013-2016 The Nxt Core Developers.                            ~
  ~ Copyright © 2016-2017 Jelurida IP B.V.                                    ~
  ~                                                                           ~
  ~ See the LICENSE.txt file at the top-level directory of this distribution  ~
  ~ for licensing information.                                                ~
  ~                                                                           ~
  ~ Unless otherwise agreed in a custom licensing agreement with Jelurida B.V.,
  ~ no part of the Nxt software, including this file, may be copied, modified,~
  ~ propagated, or distributed except according to the terms contained in the ~
  ~ LICENSE.txt file.                                                         ~
  ~                                                                           ~
  ~ Removal or modification of this copyright notice is prohibited.           ~
  ~                                                                           ~
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			body {background-color: #E0E0E0; color: #000; font-family: Tahoma; font-size: 10pt; margin: 0; padding: 10px;}
			table {border-collapse: collapse; width: 100%;}
			td {height: 20px; line-height: 20px; padding: 0;}
			.amount {background-image: url(); width: 20px;}
			.block {background-image: url(); width: 20px;}
			.creator {background-image: url(); width: 20px;}
			.disabledFee {background-image: url(); width: 20px;}
			.disabledNumberOfConfirmations {background-image: url(); width: 20px;}
			.empty {width: 20px;}
			.enabledFee {background-image: url(); width: 20px;}
			.enabledNumberOfConfirmations {background-image: url(); width: 20px;}
			.info {background-image: url(); cursor: pointer; width: 20px;}
			.myself {background-image: url(); width: 20px;}
			.recipient {background-image: url(); width: 20px;}
			.sender {background-image: url(); width: 20px;}
			.text {cursor: default; padding: 0 10px 0 5px; white-space: nowrap;}
			.timestamp {background-image: url(); width: 20px;}
		</style>
		<script type="text/javascript">
			function addTransaction(transaction, insert) {
			    removeTransaction(transaction.index);
				var transactions = document.getElementById("transactions"), row = transactions.insertRow(insert ? 0 : transactions.rows.length), element;
				row.id = "transaction" + transaction.index;
				element = row.insertCell(0);
				element.className = "timestamp";
				element.title = "Timestamp";
				element = row.insertCell(1);
				element.className = "text";
				if (transaction.deadline) {
					element.title = "Deadline: " + formatDeadline(transaction.deadline);
					element.innerHTML = formatTimestamp(transaction.transactionTimestamp);
                } else {
					if (! transaction.earnedAmountNQT && transaction.blockTimestamp != 0) {
						element.title = "Sent: " + formatTimestamp(transaction.transactionTimestamp);
					}
					element.innerHTML = formatTimestamp(transaction.blockTimestamp);
				}
				element = row.insertCell(2);
				if (transaction.blockTimestamp == 0) {
					element.className = "creator";
					element.title = "Creator";
				} else {
					if (transaction.earnedAmountNQT) {
						element.className = "block";
						element.title = "Block";
					} else {
						if (transaction.receivedAmountNQT == null) {
							element.className = "recipient";
							element.title = "Recipient";
						} else if (transaction.sentAmountNQT == null) {
							element.className = "sender";
							element.title = "Sender";
						} else {
							element.className = "myself";
							element.title = "Myself";
						}
					}
				}
				element = row.insertCell(3);
				element.className = "text";
				element.innerHTML = (transaction.account ? transaction.account : transaction.block);
				element = row.insertCell(4);
				if (transaction.sentAmountNQT) {
					element.className = "amount";
					element.title = "Sent amount";
				} else {
					element.className = "empty";
				}
				element = row.insertCell(5);
				element.className = "text";
				if (transaction.sentAmountNQT) {
					element.innerHTML = formatAmount(transaction.sentAmountNQT);
				}
				element = row.insertCell(6);
				if (transaction.blockTimestamp == 0) {
						element.className = "amount";
						element.title = "Created amount";
				} else {
					if (transaction.receivedAmountNQT) {
						element.className = "amount";
						element.title = "Received amount";
					} else if (transaction.earnedAmountNQT) {
						element.className = "amount";
						element.title = "Earned amount";
					} else {
						element.className = "empty";
					}
				}
				element = row.insertCell(7);
				element.className = "text";
				if (transaction.receivedAmountNQT) {
					element.innerHTML = formatAmount(transaction.receivedAmountNQT);
				} else if (transaction.earnedAmountNQT) {
					element.innerHTML = formatAmount(transaction.earnedAmountNQT);
				}
				element = row.insertCell(8);
				element.className = transaction.feeNQT ? "enabledFee" : "disabledFee";
				element.title = "Fee";
				element = row.insertCell(9);
				element.className = "text";
				element.innerHTML = transaction.feeNQT ? formatAmount(transaction.feeNQT) : "-";
				element = row.insertCell(10);
				element.className = transaction.numberOfConfirmations > 0 ? "enabledNumberOfConfirmations" : "disabledNumberOfConfirmations";
				element.title = "Number of confirmations";
				element = row.insertCell(11);
				element.className = "text";
				element.title = transaction.numberOfConfirmations;
				element.innerHTML = transaction.numberOfConfirmations < 0 ? "-" :
				    (transaction.numberOfConfirmations > 10 ? "10+" : transaction.numberOfConfirmations);
				element = row.insertCell(12);
				element.className = "info";
				element.title = "Id: " + transaction.id;
				eval("element.onclick = function(){parent.showMessage('Transaction id: "+transaction.id+"')};");
				element = parent.document.getElementById("myTransactionsCounter");
				element.innerHTML = parseInt(element.innerHTML) + 1;
			}
			
			function addTransactions(transactions, insert) {
				var i;
				for (i = 0; i < transactions.length; i++) {
					addTransaction(transactions[i], insert);
				}
			}
			
            function formatAmount(amount) {
                var digits=[], formattedAmount = "", i;
                var wholePart = Math.floor(amount / 100000000);
                var fractionalPart = amount % 100000000;
                do {
                    digits[digits.length] = wholePart % 10;
                    wholePart = Math.floor(wholePart / 10);
                } while (wholePart > 0);
                for (i = 0; i < digits.length; i++) {
                    if (i > 0 && i % 3 == 0) {
                        formattedAmount = "'" + formattedAmount;
                    }
                    formattedAmount = digits[i] + formattedAmount;
                }
                if (fractionalPart != 0) {
                    formattedAmount += ".";
                    for (i = ("" + fractionalPart).length; i < 8; i++) {
                        formattedAmount += "0";
                    }
                    formattedAmount += fractionalPart;
                }
                return formattedAmount;
            }

			function formatDeadline(deadline) {
				if (deadline == 0) {
					return "No deadline";
				}
				var d, h, m;
				m = deadline % 60;
				h = ((deadline - m) / 60) % 24;
				d = (deadline - m - h * 60) / 1440;
				m = m > 0 ? (m + " minute" + (m > 1 ? "s" : "")) : "";
				h = h > 0 ? (h + " hour" + (h > 1 ? "s" : "")) : "";
				d = d > 0 ? (d + " day" + (d > 1 ? "s" : "")) : "";
				deadline = d + " " + h + " " + m;
				while (deadline.indexOf("  ") >= 0) {
					deadline = deadline.replace("  ", " ");
				}
				while (deadline.charAt(0) == " ") {
					deadline = deadline.substr(1);
				}
				while (deadline.charAt(deadline.length - 1) == " ") {
					deadline = deadline.substr(0, deadline.length - 1);
				}
				return deadline;
			}
			
			function formatTimestamp(timestamp) {
				return (new Date(Date.UTC(2013, 10, 24, 12, 0, 0, 0) + timestamp * 1000)).toLocaleString();
			}
			
			function incrementNumberOfConfirmations() {
				var transactions = document.getElementById("transactions"), i, element, numberOfConfirmations;
				for (i = transactions.rows.length; i-- > 0; ) {
					element = transactions.rows[i].cells[11];
					numberOfConfirmations = parseInt(element.title);
					if (numberOfConfirmations >= 0) {
        				element.title = ++numberOfConfirmations;
	    				element.innerHTML = numberOfConfirmations > 10 ? "10+" : numberOfConfirmations;
		    			transactions.rows[i].cells[10].className = "enabledNumberOfConfirmations";
		    		}
				}
			}

			function decrementNumberOfConfirmations() {
				var transactions = document.getElementById("transactions"), i, element, numberOfConfirmations;
				for (i = transactions.rows.length; i-- > 0; ) {
					element = transactions.rows[i].cells[11];
					numberOfConfirmations = parseInt(element.title);
					if (numberOfConfirmations >= 0) {
    					element.title = --numberOfConfirmations;
	    				element.innerHTML = numberOfConfirmations > 10 ? "10+" : numberOfConfirmations;
		    			transactions.rows[i].cells[10].className = numberOfConfirmations > 0 ? "enabledNumberOfConfirmations" : "disabledNumberOfConfirmations";
		    		}
				}
			}
			
			function removeAllTransactions() {
				document.body.innerHTML = "<table id='transactions'></table>";
				parent.document.getElementById("myTransactionsCounter").innerHTML = 0;
			}
			
			function removeTransaction(index) {
				var element = document.getElementById("transaction" + index);
				if (element != null) {
					document.getElementById("transactions").deleteRow(element.rowIndex);
					element = parent.document.getElementById("myTransactionsCounter");
					element.innerHTML = parseInt(element.innerHTML) - 1;
				}
			}
			
			function removeTransactions(transactions) {
				var i;
				for (i = 0; i < transactions.length; i++) {
					removeTransaction(transactions[i].index);
				}
			}
		</script>
	</head>
	<body>
		<table id="transactions"></table>
	</body>
</html>